<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图轨迹</title>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=KzmFqkWUs9MbKNwQqLUeCWF8giEWZnox"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
    <title>地图展示</title>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            position: relative;
        }

        #tools {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }
    </style>
    </style>
</head>
<body>
<div id="allmap"></div>
<div id="tools">
    <button id="start">播放动画</button>
    <button id="end">停止播放</button>
</div>
</body>
</html>
<script type="text/javascript">
    let bmap = new BMapGL.Map("allmap")
    bmap.centerAndZoom(new BMapGL.Point(114.92, 27.81), 20);    // 初始化地图，设置中心点坐标和地图级别
    bmap.enableScrollWheelZoom(true);// 开启鼠标滚轮缩放
    bmap.setTilt(20);// 设置地图初始倾斜角度
    var path = [{
        'lng': 114.92111,
        'lat': 27.81111
    }, {
        'lng': 114.9212,
        'lat': 27.81112
    }, {
        'lng': 114.9213,
        'lat': 27.81113
    }, {
        'lng': 114.92114,
        'lat': 27.81113
    }, {
        'lng': 114.9215,
        'lat': 27.81114
    }, {
        'lng': 114.9216,
        'lat': 27.81114
    }, {
        'lng': 114.92117,
        'lat': 27.81115
    }];
    let point = [];
    for (let i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat))
    }
    let pl = new BMapGL.Polyline(point)
    let trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
        overallView: true, // 动画完成后自动调整视野到总览
        tilt: 30,          // 轨迹播放的角度，默认为55
        duration: 20000,   // 动画持续时长，默认为10000，单位ms
        delay: 3000        // 动画开始的延迟，默认0，单位ms
    })
    document.getElementById('start').addEventListener('click', function () {
        trackAni.start();
    });
    document.getElementById('end').addEventListener('click', function () {
        trackAni.cancel();         // 强制停止动画
    });
</script>
